<template>
	<div class="details-page w-full h-full">
		<!-- 文章封面 -->
		<div
			class="cover w-full h-[200px] bg-center bg-no-repeat bg-cover transition duration-300 hover:shadow-lg"
			:style="{
				backgroundImage: `url(${cover})`,
			}"></div>
		<!-- 文章信息 -->
		<div class="article-info mt-5 w-full">
			<div class="title w-full my-1">
				<h1 class="font-bold text-3xl truncate text-gray-800">{{ title }}</h1>
			</div>
			<div class="publish-date">
				<span class="text-gray-700">{{ publishDate }}</span>
			</div>
			<div class="category mt-1 w-fit h-fit cursor-pointer">
				<span class="text-green-500">{{ category }}</span>
			</div>
		</div>
		<vditor-preview :content="content" />
	</div>
</template>

<script name="DetailsPage" lang="ts" setup>
// 获取笔记 ID
const route = useRoute();

const cover = ref<string>(''); // 文章封面
const title = ref<string>(''); // 文章标题
const content = ref<string>(''); // 文章内容
const category = ref<string>(''); // 文章分类
const publishDate = ref<string>(''); // 发布日期

const res: any = await $fetch(`/api/client/article/detail?id=${route.params.id}`);
if (res.code === 1) {
	title.value = res.data.title;
	content.value = res.data.content;
	category.value = res.data.categoryName;
	publishDate.value = res.data.createdAt;
} else {
	ElMessage.error(res.message);
}

onMounted(() => {
	cover.value = `${location.origin}${res.data.cover}`;
});
</script>
